<template>
  <div class="singer_exclusive">
    <div class="main">
      <div class="singer_data">
        x
        <img class="singer_photo" :src="singerInfo.cover" />

        <div class="singer_info">
          <div class="singer_cont">
            <div class="singer_name">
              <h1>{{ singerInfo.name }}</h1>
            </div>
            <div class="singer_desc">
              <div class="singer_desc_txt">{{ singerInfo.briefDesc }}</div>
              <div class="desc_nav">
                <span>[更多]</span>
                <span>[举报]</span>
              </div>
            </div>
            <ul class="singer_static">
              <li class="static_item">
                <span class="static_tit">单曲</span>
                <strong class="static_num">{{ singerInfo.musicSize }}</strong>
              </li>
              <li class="static_item">
                <span class="static_tit">专辑</span>
                <strong class="static_num">{{ singerInfo.albumSize }}</strong>
              </li>
              <li class="static_item">
                <span class="static_tit">MV</span>
                <strong class="static_num">{{ singerInfo.mvSize }}</strong>
              </li>
            </ul>
          </div>
          <div class="actions">
            <el-button
              type="success"
              icon="el-icon-video-play"
              @click="centerDialogVisible = true"
            >播放歌手热门歌曲</el-button>
            <el-button icon="el-icon-plus" v-show="!isCheck" @click="changeCheck">关注2728.1万</el-button>
            <el-button icon="el-icon-check" v-show="isCheck" @click="changeCheck">已关注2728.1万</el-button>
          </div>
        </div>
      </div>
      <div class="part_hd">
        <h2>热门歌曲</h2>
        <div>
          全部
          <span class="el-icon-arrow-right"></span>
        </div>
      </div>
      <el-table :data="songs" stripe style="width: 100%">
        <el-table-column type="index" width="50px"></el-table-column>
        <el-table-column label="歌曲">
          <template slot-scope="{ row }">
            <span>{{ row.name }}</span>
            <div class="menu_icon">
              <div class="menu_icon_play" @click="toMusicPlay(row.id)"></div>
              <div class="menu_icon_add"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="al.name" label="专辑"></el-table-column>
        <el-table-column prop="dt" label="时长"></el-table-column>
      </el-table>
      <div class="client_guide">
        <p class="client_guide_txt">查看更多内容，请下载客户端</p>
        <span class="client_guide_btn">立即下载</span>
      </div>
    </div>
    <el-dialog title="QQ音乐提醒您" :visible.sync="centerDialogVisible" width="30%">
      <div class="tip">
        <div class="warning_icon">x</div>
        <span>您播放的歌曲仅限客户端播放，建议您打开客户端进行播放</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">打开客户端</el-button>
        <el-button type="success" @click="centerDialogVisible = false">下载客户端</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqSinger, reqSongs } from "../../api/singer";
import dayjs from "dayjs";
export default {
  name: "Singer",
  data() {
    return {
      centerDialogVisible: false,
      isCheck: false,
      singerInfo: {},
      songs: [],
    };
  },
  methods: {
    //改变关注的状态
    changeCheck() {
      this.isCheck = !this.isCheck;
    },
    //获取歌手信息
    async getSingerInfo(id) {
      const res = await reqSinger(id);
      // console.log(res);
      this.singerInfo = res.data.data.artist;
    },
    //获取热门歌曲
    async getSongs(id) {
      const res = await reqSongs(id);
      console.log(res);
      res.data.songs.forEach((item) => {
        item.dt = dayjs(item.dt).format("mm:ss");
      });
      this.songs = res.data.songs;
    },
    //跳转播放器并传专辑id
    toMusicPlay(songId) {
      this.$router.push({
        name: "MusicPlayer",
        query: {
          songId,
        },
      });
    },
  },
  mounted() {
    window.scrollTo(0, 0);
    //singeList组件传过来的singerId
    const id = this.$route.query.singerId;
    if (!id) {
      this.$router.go(-1);
    }
    this.getSingerInfo(id);
    this.getSongs(id);
  },
};
</script>

<style>
.singer_exclusive {
  width: 100%;
  height: 100%;
  background-image: url("../../../public/images/bg_detail.bb32b2d1.jpg");
  background-repeat: no-repeat;
}
.singer_exclusive .main {
  width: 1200px;
  max-width: 1200px;
  margin: 0 163px;
}
/* .singer_data开始 */
.main .singer_data {
  font-size: 0;
  height: 250px;
  line-height: 250px;
}
.singer_data .singer_photo {
  width: 250px;
  height: 250px;
  line-height: normal;
  border-radius: 50%;
  vertical-align: middle;
}
.singer_data .singer_info {
  margin-left: 50px;
  font-size: 16px;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}
.singer_info .singer_cont {
  height: 127px;
  padding: 30px 0 0 0;
}
.singer_cont .singer_name {
  height: 50px;
}
.singer_cont .singer_name h1 {
  font-family: Simsun;
  font-size: 38px;

  margin: 0 10px 0 0;
}
.singer_cont .singer_desc {
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
}

.singer_cont .singer_desc .singer_desc_txt {
  display: inline-block;
  font-size: 14px;
  max-width: 720px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.singer_cont .singer_desc .desc_nav {
  display: inline-block;
  vertical-align: top;
}
.singer_cont .singer_desc .desc_nav span:hover {
  color: green;
  cursor: pointer;
}
.singer_cont .singer_static {
  display: flex;
  height: 23px;
  line-height: 23px;
}
.singer_cont .singer_static .static_item {
  height: 24.8px;
  width: 120px;
  border-right: 1px solid #c9c9c9;
  margin-right: 20px;
}
.singer_cont .singer_static .static_item span {
  font-size: 18px;
  line-height: 23px;

  text-align: center;
}
.singer_cont .singer_static .static_item strong {
  font-size: 25px;
  line-height: 23px;
  margin-right: 10px;
}
.singer_static .static_item:last-child {
  border-right: none;
}
.singer_info .actions {
  height: 38px;
  margin-top: 20px;
}
/* .singer_data 结束 */
/* part_hd开始 */
.main .part_hd {
  height: 60px;
  line-height: 60px;
  width: 100%;
  overflow: hidden;
}
.main .part_hd h2 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.main .part_hd div {
  font-size: 14px;
  float: right;
}
/* part_hd结束 */
/* client_guide开始 */
.main .client_guide {
  font-size: 14px;
  line-height: 21px;
  height: 87.4px;
  width: 100%;
  margin-bottom: 22px;
}
.main .client_guide .client_guide_txt {
  font-size: 18px;
  height: 26.4px;
  width: 100%;
  line-height: 27px;
  text-align: center;
}
.main .client_guide .client_guide_btn {
  display: block;
  text-align: center;
  height: 41px;
  width: 175px;
  font-size: 16px;
  line-height: 41px;
  margin: 20px 513px 0 513px;
  border: 1px solid;
  border-radius: 41px;
  color: #fff;
  background-color: #2caf6f;
  cursor: pointer;
}
/* client_guide结束 */
.menu_icon {
  /* border: 1px solid red; */
  height: 38px;
  line-height: 50px;
  width: 80px;
  margin: 0;
  display: none;
  margin: -18px 0 0 0;
  position: absolute;
  top: 25px;
  bottom: 7px;
  right: -10px;
  left: 280px;
}
.el-table thead {
  background-color: #fafafa;
}
.el-table--enable-row-transition .el-table__body td {
  position: relative;
}
.el-table--enable-row-transition .el-table__body td:hover .menu_icon {
  display: block;
}
.menu_icon .menu_icon_play {
  /* border: 1px solid green; */
  float: left;
  width: 38px;
  height: 38px;
  background-image: url("../../../public/images/icon_list_menu.08951c0e.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
}
.menu_icon .menu_icon_play:hover {
  background-position: -40px 0;
}
.menu_icon .menu_icon_add {
  float: right;
  /* border: 1px solid green; */
  width: 38px;
  height: 38px;
  background-image: url("../../../public/images/icon_list_menu.08951c0e.png");
  background-position: 0 -80px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.menu_icon .menu_icon_add:hover {
  background-position: -40px -80px;
}
/*  */
.warning_icon {
  font-size: 0;
  height: 48px;
  line-height: 56px;
  width: 48px;
  margin-right: 10px;
  background-image: url("../../../public/images/icon_popup.png");
  background-position: 0 0;
  display: inline-block;
}
.tip {
  vertical-align: middle;
}
</style>
